import { useEffect, useState } from 'react';
import { Checkbox, Form, Input, Modal, Select, message } from 'antd';
import { addUser, getDetail, updateUser } from '@/request/userMange';
import MyModal from '@/components/modal';
import { roleOptions } from '../../../../utils/config/userManageConfig';

const layout = {
  labelCol: { flex: '70px' },
  wrapperCol: { flex: '200px' },
};

const AddUserModal = ({ open, actionInfo, handleClose }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 关闭弹框
  const onClose = () => {
    handleClose();
    form.resetFields();
  };

  // 提交
  const onSubmit = async () => {
    setLoading(true);
    try {
      const data = await form.validateFields();
      const params = {
        ...data,
        personId: actionInfo?._id ? actionInfo?._id : null,
        isDelete: data.isDelete ? 0 : 1,
      };
      let req = addUser;
      if (actionInfo?._id) {
        req = updateUser;
      }
      const res = await req(params);
      if (typeof res === 'string') {
        message.warning(res);
      } else {
        message.success('操作成功');
        onClose();
      }
      setLoading(false);
    } catch (err: any) {
      setLoading(false);
      console.log(err);
      if (!err.errorFields) {
        message.warning(err.message);
      }
    }
  };

  // 获取详情
  const getInfo = async () => {
    try {
      const res: any = await getDetail({ personId: actionInfo?._id || '' });
      if (typeof res === 'string') {
        message.warning(res);
      } else {
        form.setFieldsValue({
          ...res,
          isDelete: res.isDelete === 0,
        });
      }
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    if (open && actionInfo?._id) {
      getInfo();
    }
  }, [open]);

  // 校验手机号
  const checkPhone = (_, value) => {
    const reg = /^1[3-9]\d{9}$/;
    if (!value) {
      return Promise.reject(new Error('请输入手机号'));
    }
    if (!reg.test(value)) {
      return Promise.reject(new Error('请输入正确的手机号'));
    }
    return Promise.resolve();
  };

  return (
    <MyModal
      open={open}
      title={actionInfo?.title || ''}
      onCancel={onClose}
      onOk={() => {
        onSubmit();
      }}
      destroyOnClose
      maskClosable={false}
      confirmLoading={loading}
    >
      <Form form={form} labelCol={{ span: 4 }} colon={false} wrapperCol={{ span: 20 }} initialValues={{ isDelete: true }}>
        <Form.Item label="用户名" name="userName" rules={[{ required: true, message: '请输入用户名' }]}>
          <Input placeholder="请输入" allowClear />
        </Form.Item>
        <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
          <Input placeholder="请输入" allowClear />
        </Form.Item>
        <Form.Item label="角色" name="role" rules={[{ required: true, message: '请选择角色' }]}>
          <Select placeholder="请选择" options={roleOptions} />
        </Form.Item>
        <Form.Item label="手机号" name="phone">
          <Input placeholder="请输入" allowClear />
        </Form.Item>
        <Form.Item label="是否启用" name="isDelete" valuePropName="checked" style={{ marginBottom: '0' }}>
          <Checkbox></Checkbox>
        </Form.Item>
      </Form>
    </MyModal>
  );
};

export default AddUserModal;
